<template>
    <div>
        <el-card class="card">
            <div class="title">
                <h2 style="text-align: center">目标任务录入</h2>
            </div>
        </el-card>
        <br />
        <el-container>
            <el-aside width="300px" style="height: 100vh"
                ><el-card>
                    <div>
                        <el-select v-model="value" filterable @change="searchWorkOfTargetYear">
                            <el-option
                                v-for="yearTargetOption in yearTargetOptions"
                                :key="yearTargetOption.value"
                                :label="yearTargetOption.label"
                                :value="yearTargetOption.value"
                            >
                            </el-option>
                        </el-select>
                        <el-button type="primary" style="margin-left: 5px" @click="searchWorkOfTargetYear">查询</el-button>
                    </div>
                </el-card>
                <el-menu v-show="label">
                    <el-menu-item index="1">
                        <i class="el-icon-menu"></i>
                        <span slot="title">{{ label }} A类</span>
                    </el-menu-item>
                    <div v-if="taskType == 0" class="menu-buttom">
                        <div v-for="content in taskData" :key="content.id" class="el-tree-style">
                            <div>
                                <span class="el-tree-node__label">{{ content.name }}</span>
                                <div>
                                    <span class="is-leaf el-tree-node__expand-icon el-icon-caret-right"></span>
                                    <span class="el-tree-node__label">{{ content.acceptDeptId }}</span>
                                    <el-tag v-if="content.level == 0">一级</el-tag>
                                    <el-tag type="success" v-if="content.level == 1">二级</el-tag>
                                    <el-tag type="warning" v-if="content.level == 2">三级</el-tag>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-menu>
            </el-aside>
            <el-main style="padding-top: 0">
                <div>
                    <div v-show="addTaskDisabled" v-if="taskType == 0">{{ label }}A类</div>
                    <div v-show="addTaskDisabled" v-else-if="taskType == 1">{{ label }}B类</div>
                    <div v-show="addTaskDisabled" v-else>{{ label }}C类</div>
                </div>
                <el-tabs type="border-card">
                    <el-tab-pane label="下发任务">
                        <div>
                            <el-button type="warning" @click="addButton" v-show="addTaskDisabled">新增任务</el-button>
                        </div>
                        <br />
                        <el-table :data="taskData" style="width: 100%" border>
                            <el-table-column prop="id" label="序号"> </el-table-column>
                            <el-table-column prop="name" label="任务标题"> </el-table-column>
                            <el-table-column prop="acceptDeptId" label="接受部门"> </el-table-column>
                            <el-table-column prop="type" label="任务属性">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.type == 0">A</div>
                                    <div v-else-if="scope.row.type == 1">B</div>
                                    <div v-else-if="scope.row.type == 2">C</div>
                                    <div v-else></div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="level" label="分配次级">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.level == 0">一级</div>
                                    <div v-else-if="scope.row.level == 1">二级</div>
                                    <div v-else-if="scope.row.level == 2">三级</div>
                                    <div v-else></div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="isAssess" label="学校年度专项考核">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.isAssess == 0">否</div>
                                    <div v-else-if="scope.row.isAssess == 1">是</div>
                                    <div v-else></div>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="150">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="primary" @click="editTaskById(scope.row.id)">编辑</el-button>
                                    <el-button size="mini" type="danger" @click="deleteTaskById(scope.row.id)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>

        <!--新增任务对话框-->
        <el-dialog title="下发任务" :visible.sync="addTaskDialogVisible" width="90%">
            <el-form :model="addTaskInfoForm" label-width="100px">
                <el-row>
                    <el-col :span="4">
                        <el-form-item>
                            <span style="over-flow: hidden">序号</span>
                            <el-input v-model="addTaskInfoForm.id"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span>任务标题</span>
                            <el-input v-model="addTaskInfoForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <span>任务属性</span>
                            <el-input v-model="addTaskInfoForm.type" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <span>任务分配次级</span>
                            <el-input v-model="addTaskInfoForm.level" :disabled="true"> </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <el-form-item label="">
                            <span>任务下发人</span>
                            <!-- <el-input v-model="addTaskInfoForm.allocUserId"></el-input> -->
                            <el-select v-model="addTaskInfoForm.allocUserId" filterable>
                                <el-option v-for="item in teacherOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="">
                            <span>任务下发部门</span>
                            <!-- <el-input v-model="addTaskInfoForm.allocDeptId"></el-input> -->
                            <el-select v-model="addTaskInfoForm.allocDeptId" filterable>
                                <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="">
                            <span>任务接受部门</span>
                            <!-- <el-input v-model="addTaskInfoForm.acceptDeptId"></el-input> -->
                            <el-select v-model="addTaskInfoForm.acceptDeptId" filterable>
                                <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item>
                            <span>是否列为学校年度专项考核</span>
                            <br />
                            <el-select v-model="addTaskInfoForm.isAssess" placeholder="--">
                                <el-option v-for="item in collegeYearTestoptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="">
                    <span>任务要求</span>
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="addTaskInfoForm.requirement"> </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="addTaskByIdType">保存</el-button>
                <el-button @click="canelAddTask">取消</el-button>
            </span>
        </el-dialog>

        <!--修改任务对话框-->
        <el-dialog title="修改任务" :visible.sync="eidtTaskDialogVisible" width="90%">
            <el-form :model="editTaskInfoForm" label-width="100px">
                <el-row>
                    <el-col :span="4">
                        <el-form-item>
                            <span style="over-flow: hidden">序号</span>
                            <el-input v-model="editTaskInfoForm.id"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <span>任务标题</span>
                            <el-input v-model="editTaskInfoForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <span>任务属性</span>
                            <el-input v-model="editTaskInfoForm.type" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <span>任务分配次级</span>
                            <el-input v-model="editTaskInfoForm.level" :disabled="true"> </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <el-form-item label="">
                            <span>任务下发人</span>
                            <el-select v-model="editTaskInfoForm.allocUserId" filterable>
                                <el-option v-for="item in teacherOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="">
                            <span>任务下发部门</span>
                            <el-select v-model="editTaskInfoForm.allocDeptId" filterable>
                                <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="">
                            <span>任务接受部门</span>
                            <el-select v-model="editTaskInfoForm.acceptDeptId" filterable>
                                <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item>
                            <span>是否列为学校年度专项考核</span>
                            <br />
                            <el-select v-model="editTaskInfoForm.isAssess" placeholder="--">
                                <el-option v-for="item in collegeYearTestoptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="">
                    <span>任务要求</span>
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="editTaskInfoForm.requirement"> </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="pushEditTask">保存</el-button>
                <el-button @click="cancelEditTask">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import personApi from '../../../../api/person';
import departmentApi from '../../../../api/department';
import yearTargetApi from '../../../../api/yearTagetApi';
import workOfYearTargetApi from '../../../../api/workOfYearTargetApi';

export default {
    data() {
        return {
            eidtTaskDialogVisible: false,
            taskType: 0,
            addTaskDisabled: false,
            departmentOptions: [],
            teacherOptions: [],
            collegeYearTestoptions: [
                {
                    value: -1,
                    label: '--'
                },
                {
                    value: 1,
                    label: '是'
                },
                {
                    value: 0,
                    label: '否'
                }
            ],
            is_collegeYearTest: '',
            editTaskInfoForm: {},
            addTaskInfoForm: {
                type: 'A',
                level: '一级'
            },
            addTaskDialogVisible: false,
            yearTargetOptions: [],
            value: '',
            label: '',
            data: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            taskData: []
        };
    },
    methods: {
        // 获取所有老师
        async getTeachers() {
            await personApi.getAllTeacher().then((res) => {
                for (let i = 0; i < res.data.length; ++i) {
                    this.teacherOptions[i] = {
                        value: res.data[i].id,
                        label: res.data[i].name
                    };
                }
            });
        },
        async getDepartment() {
            await departmentApi.getAllDepart().then((res) => {
                for (let i = 0; i < res.data.length; ++i) {
                    this.departmentOptions[i] = {
                        value: res.data[i].id,
                        label: res.data[i].name
                    };
                }
                // 强制刷新 解决有数据不渲染的问题
                this.$forceUpdate();
            });
        },
        //  编辑任务
        async editTaskById(id) {
            await workOfYearTargetApi.getWorkOfYearTargetById(id).then((res) => {
                this.editTaskInfoForm = res.data;
                this.editTaskInfoForm.type = 'A类';
                this.editTaskInfoForm.level = '一级';
            });
            this.eidtTaskDialogVisible = true;
        },
        cancelEditTask() {
            this.eidtTaskDialogVisible = false;
            this.editTaskInfoForm = {};
        },
        async pushEditTask() {
            console.log(this.editTaskInfoForm);
            this.editTaskInfoForm.type = 0;
            this.editTaskInfoForm.level = 0;
            await workOfYearTargetApi.editWorkOfYearTarget(this.editTaskInfoForm.id, this.editTaskInfoForm).then((res) => {
                console.log(res);
                this.$message.success('更改任务信息成功！');
                this.eidtTaskDialogVisible = false;
                this.searchWorkOfTargetYear();
            });
        },
        addButton() {
            (this.addTaskInfoForm.type = 'A'), (this.addTaskInfoForm.level = '一级');
            this.addTaskDialogVisible = true;
        },

        // 根据value 获取当前的label的值
        getLabel() {
            let obj = {};
            obj = this.yearTargetOptions.find((item) => {
                return item.value == this.value;
            });
            this.label = obj.label;
        },
        // //根据label 查value
        // getValue(id){
        //     let temp = {};
        //     temp = this.teacherOptions.find(item => {
        //         return item.label == id
        //     })
        //     this.editTaskInfoForm.allocUserId = temp.id
        // },
        async getTargetYear() {
            await yearTargetApi.findAll().then((res) => {
                for (let i = 0; i < res.data.length; ++i) {
                    this.yearTargetOptions[i] = {
                        value: res.data[i].id,
                        label: res.data[i].name
                    };
                }
                this.value = this.yearTargetOptions[0].value;
                this.label = this.yearTargetOptions[0].label;
                // 强制刷新 解决有数据不渲染的问题
                this.$forceUpdate();
            });
        },
        async searchWorkOfTargetYear() {
            this.getLabel();
            await workOfYearTargetApi.getWorkOfYearTarget(this.value, 0).then((res) => {
                this.addTaskDisabled = true;
                this.taskData = []
                for(let i =0;i<res.data.length;++i){
                    if(res.data[i].level == 0){
                        this.taskData.push(res.data[i])
                    }
                }
            });
        },
        // 根据年度目标任务的id和等级添加任务
        async addTaskByIdType() {
            (this.addTaskInfoForm.type = 0), (this.addTaskInfoForm.level = 0), (this.addTaskInfoForm.yearTargetId = this.value);
            await workOfYearTargetApi.addWorkOfYearTarget(this.value, this.taskType, this.addTaskInfoForm).then((res) => {
                this.$message.success('新增任务成功');
                this.addTaskInfoForm = {};
            });
            this.searchWorkOfTargetYear();
            this.addTaskDialogVisible = false;
        },
        canelAddTask() {
            this.addTaskDialogVisible = false;
            this.addTaskInfoForm = {};
        },

        async deleteTaskById(id) {
            const confirmResult = await this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch((err) => err);
            if (confirmResult != 'confirm') {
                return;
            }
            if (confirmResult == 'confirm') {
                await workOfYearTargetApi.removeWorkOfYearTarget(id).then((res) => {
                    this.$message({
                        message: '删除目标任务成功！',
                        type: 'success'
                    });
                    this.searchWorkOfTargetYear();
                });
            }
        }
    },
    created() {
        this.getDepartment();
        this.getTargetYear();
        this.getTeachers();
    }
};
</script>

<style scoped>
.el-tree-style {
    padding: 0px 40px;
}
.el-tree-node__label {
    color: #606266;
}
.el-tag {
    float: right;
}
.title {
    border: 1px #bcbcbc;
    width: 50%;
    margin: 0 auto;
}
.card {
    border-radius: 15px;
    width: 50%;
    margin: 0 auto;
}
.el-menu-item.is-active {
    color: #409eff;
}
.menu-buttom {
    padding-bottom: 20px;
}
</style>


